﻿import { AfterViewInit, Component, Injector, ViewEncapsulation, OnInit } from '@angular/core';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
    TenantDashboardServiceProxy,
    DashAnnualOutput,
    DashModelOutput,
    DashWorkshopOutput
} from '@shared/service-proxies/service-proxies';
import { curveBasis } from 'd3-shape';
import G2 from '@antv/g2/build/g2';

import * as _ from 'lodash';

abstract class DashboardChartBase {
    loading = true;

    showLoading() {
        setTimeout(() => {
            this.loading = true;
        });
    }

    hideLoading() {
        setTimeout(() => {
            this.loading = false;
        });
    }
}

// 成本收入支出情况
class CostChart1 extends DashboardChartBase {
    constructor(private _dashboardService: TenantDashboardServiceProxy) {
        super();
    }
    costData = [];

    srData = [];

    colors = ['#00c5dc', '#f4516c', '#34bfa3', '#ffb822'];

    customColors = [
        { name: '1', value: '#00c5dc' },
        { name: '2', value: '#f4516c' },
        { name: '3', value: '#34bfa3' },
        { name: '4', value: '#ffb822' },
        { name: '今年', value: '#769cf8' },
        { name: '去年', value: '#ccd6f0' }
    ];

    curve: any = curveBasis;

    init() {
        this.reload();
    }

    formatData(): any {
        for (let j = 0; j < this.costData.length; j++) {
            let stat: any = this.costData[j];

            let series = [];
            for (let i = 0; i < stat.data.length; i++) {
                series.push({
                    name: i + 1,
                    value: stat.data[i]
                });
            }

            stat.changeData = [
                {
                    name: j + 1,
                    series: series
                }
            ];

            if (j % 2 === 1) {
                stat.rightStyle = 'none';
            } else {
                stat.rightStyle = '1px solid #ebedf2';
            }

            if (j === this.costData.length - 1 || j === this.costData.length - 2) {
                stat.bottomStyle = 'none';
            } else {
                stat.bottomStyle = '1px solid #ebedf2';
            }
        }
    }

    reload() {
        this.showLoading();

        this._dashboardService.getDashCost().subscribe(result => {
            this.costData = result.costs;
            this.srData = result.income.chartData;
            this.formatData();
            this.hideLoading();
        });
    }
}

class CostChart2 extends DashboardChartBase {
    modelData = new Array<DashModelOutput>();
    selectedModelData = new DashModelOutput();

    customColors = [
        { name: '收入', value: '#0fcca6' },
        { name: '支出', value: '#eee' },
        { name: '原材料成本', value: '#4397f1' },
        { name: '辅助材料成本', value: '#9E7AD9' },
        { name: '标准件成本', value: '#F168A7' },
        { name: '外协产品成本', value: '#EFA262' },
        { name: '工装成本', value: '#6CCF83' },
        { name: '燃动成本', value: '#47B9CB' },
        { name: '人工成本', value: '#6E7BDF' },
        { name: '制造成本', value: '#7A92A8' },
        { name: '其他直接成本', value: '#E1886C' }
    ];

    curve: any = curveBasis;

    constructor(private _dashboardService: TenantDashboardServiceProxy) {
        super();
    }

    init() {
        this.reload();
    }

    reload() {
        this.showLoading();
        this._dashboardService.getDashModel().subscribe(result => {
            this.modelData = result;
            this.selectedModelData = this.modelData.length > 0 ? this.modelData[0] : new DashModelOutput();
            this.hideLoading();
        });
    }
}

class CostChart3 extends DashboardChartBase {
    workshopData = new Array<DashWorkshopOutput>();
    selectedWorkshopData = new DashWorkshopOutput();

    customColors = [{ name: '车间收入', value: '#00c5dc' }];

    constructor(private _dashboardService: TenantDashboardServiceProxy) {
        super();
    }

    init() {
        this.reload();
    }

    formatData(): any {
        for (let j = 0; j < this.workshopData.length; j++) {
            let result1: any = this.workshopData[j].result1;

            result1.changeData = [
                {
                    name: '车间收入',
                    series: result1.data
                }
            ];

            let result2 = this.workshopData[j].result2;

            result2.data.forEach(el => {
                let sum = _.sum(el.value);
                let avg = sum / el.value.length;

                let changeData = [
                    {
                        name: el.name,
                        series: el.value.map((el1, idx) => {
                            return { name: idx + 1, value: el1 };
                        })
                    }
                ];

                (el as any).sum = sum;
                (el as any).avg = avg;
                (el as any).changeData = changeData;
            });
        }
    }

    reload() {
        this.showLoading();

        this._dashboardService.getDashWorkshop().subscribe(result => {
            this.workshopData = result;
            this.selectedWorkshopData = this.workshopData.length > 0 ? this.workshopData[0] : new DashWorkshopOutput();
            this.formatData();
            this.hideLoading();
        });
    }
}

class CostChart4 extends DashboardChartBase {
    annualData: DashAnnualOutput;
    constructor(private _dashboardService: TenantDashboardServiceProxy) {
        super();
    }

    init() {
        this.reload();
    }

    initChart() {
        let data = [];

        this.annualData.data.forEach((el, i) => {
            data.push({
                month: el.name,
                成本: el.values[0],
                增减百分比: el.values[1]
            });
        });

        let chart = new G2.Chart({
            container: 'c1',
            forceFit: true,
            padding: [50, 80, 80, 50]
        });
        chart.source(data);

        chart.axis('增减百分比', {
            title: {
                textStyle: {
                    fontSize: 14, // 文本大小
                    textAlign: 'center', // 文本对齐方式
                    fill: '#ddd' // 文本颜色
                    // ...
                }
            },
            label: {
                textStyle: {
                    fill: '#20c997'
                }
            }
        });

        chart
            .interval()
            .position('month*成本')
            .label('成本')
            .color('#D2F5F9')
            .adjust([
                {
                    type: 'dodge',
                    marginRatio: 1 / 32
                }
            ]);
        chart
            .line()
            .position('month*增减百分比')
            .color('#20c997')
            .size(1)
            .shape('smooth');
        chart
            .point()
            .position('month*增减百分比')
            .color('#20c997')
            .size(3)
            .shape('circle');

        chart.render();
    }

    reload() {
        this.showLoading();

        this._dashboardService.getDashAnnual().subscribe(result => {
            this.annualData = result;
            this.initChart();
            this.hideLoading();
        });
    }
}

class CostChart5 extends DashboardChartBase {
    constructor(private _dashboardService: TenantDashboardServiceProxy) {
        super();
    }
    productChange = [];

    eventChange = [];

    init() {
        this.reload();
    }

    reload() {
        this.showLoading();

        this._dashboardService.getDashChange().subscribe(result => {
            console.log(result);
            this.productChange = result.productChanges;
            this.eventChange = result.eventChanges;
            this.hideLoading();
        });
    }
}

@Component({
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.less'],
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()]
})
export class DashboardComponent extends AppComponentBase implements OnInit {
    costChart1: CostChart1;
    costChart2: CostChart2;
    costChart3: CostChart3;
    costChart4: CostChart4;
    costChart5: CostChart5;

    constructor(injector: Injector, private _dashboardService: TenantDashboardServiceProxy) {
        super(injector);
        this.costChart1 = new CostChart1(this._dashboardService);
        this.costChart2 = new CostChart2(this._dashboardService);
        this.costChart3 = new CostChart3(this._dashboardService);
        this.costChart4 = new CostChart4(this._dashboardService);
        this.costChart5 = new CostChart5(this._dashboardService);
    }

    ngOnInit(): void {
        this.costChart1.init();
        this.costChart2.init();
        this.costChart3.init();
        this.costChart4.init();
        this.costChart5.init();
    }
}
